<template>
    <div class="namePass">
    <div class="qrcode">
        
    </div>
    <div class="title">千锋管理系统</div>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
        <el-form-item label="账号" prop="userName">
            <el-input v-model="ruleForm.userName" type="text" autocomplete="off" class='ipt1' />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
            <el-input v-model="ruleForm.passWord" type="password" autocomplete="off" class='ipt2' />
        </el-form-item>
        <el-form-item label="验证码" prop="validateCaptcha">
            <el-input v-model="ruleForm.validateCaptcha" class='ipt3' @keydown.enter="submitForm(ruleFormRef)"
                type="text" />
            <div class="validateImg" v-html="authCode" @click="verificationCode" v-loading="loading"></div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        </el-form-item>
    </el-form>
    <div class="otherLogin">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iphone"></use>
        </svg>
        <a href="javascript:;" style="color:rgb(4, 150, 255)" @click="loginChange">切换短信登录</a>
    </div>   
</div>
</template>
<script setup>
import { reactive, ref, onMounted, watchEffect } from 'vue'
import { rules, useLoginState } from '../../methods/index'
import * as api from '../../api/index'
import { useRouter } from 'vue-router'
import { useLogin } from '../../store/cart'
import { storeToRefs } from 'pinia'
//映入loading加载框
import { ElLoading } from 'element-plus'

//展示加载框
let changeLogin = useLogin()
let { msg } = storeToRefs(changeLogin)
let useRouters = useRouter()
//点击转换登录页面
let loginChange = function () {
    changeLogin.$patch((state) => {
        state.msg = false
    })
}
//控制验证码上方loading是否显示
let loading = ref(true)
const ruleFormRef = ref()
const ruleForm = reactive({
    userName: '',
    passWord: '',
    validateCaptcha: '',
})
//正则验证成功
let validateVictory = async () => {
    loadingFrame = ElLoading.service({
        lock: true,
        text: '正在加载中...',
        background: 'rgba(0,0,0,0.4)'
    })
    console.log('验证成功');
    try {
        //验证验证码是否正确
        let res = await api.verifyCaptureApi(ruleForm.validateCaptcha)

        loginRequest(ruleForm.userName, ruleForm.passWord)
    } catch {
        //验证错误重新调用获取验证码的方法
        loadingFrame.close()
        verificationCode()

    }

}
//正则验证失败
let validateDefeat = () => {
    console.log('验证失败');
}
let loadingFrame = ref(null)
//封装验证账号密码方法
let loginRequest = async (username, password) => {

    try {
        let res2 = await api.loginApi(username, password)
        sessionStorage.setItem('qf-token', res2.data.token)
        changeLogin.$patch((state) => {
            state.userInfo = res2.data.userInfo
        })
        useRouters.push('/')
        loadingFrame.close()
    } catch (e) {
        loadingFrame.close()
    }

}
let submitForm = useLoginState(validateVictory, validateDefeat)
//存储验证码的超文本
let authCode = ref()
//获取验证码
let verificationCode = async function () {
    loading.value = true
    let res = await api.getCaptureApi()
    loading.value = false
    authCode.value = res.data.img
}
onMounted(() => {
    verificationCode()
})




</script>
<style lang="scss">

</style>
